<template>
  <el-main>

    <el-form :inline="true" :model="queryData" class="demo-form-inline">
      <el-form-item label="解约合同编号">
        <el-input v-model="queryData.terminationNo" placeholder="请输入解约合同编号"></el-input>
      </el-form-item>
      <el-form-item label="录入人">
        <el-input v-model="queryData.inputUserName" placeholder="请输入录入人姓名"></el-input>
      </el-form-item>
      <br/>
      <el-form-item label="小区名称">
        <el-input v-model="queryData.premiseName" placeholder="请输入小区名称"></el-input>
      </el-form-item>
      <el-form-item label="协议录入日期">
        <el-date-picker
          v-model="rangeDate"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>


      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="cfTerminationNo"
          label="解约合同编号">
        </el-table-column>
        <el-table-column
          prop="premiseName"
          label="小区">
        </el-table-column>
        <el-table-column
          prop="terminationType"
          label="解约类型">
        </el-table-column>
        <el-table-column
          label="解约日期">
          <template slot-scope="scope">
            <span v-if="scope.row.terminationDate!= null">
              {{ parseTime(scope.row.terminationDate, "{y}/{m}/{d}") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核日期">
          <template slot-scope="scope">
            <span v-if="scope.row.auditDate!= null">
              {{ parseTime(scope.row.auditDate, "{y}/{m}/{d}") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="finalStatement"
          label="结算金额">
        </el-table-column>
        <el-table-column
          label="录入日期">
          <template slot-scope="scope">
            <span v-if="scope.row.inputDate!= null">
              {{ parseTime(scope.row.inputDate, "{y}/{m}/{d}") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="inputUserName"
          label="操作人">
        </el-table-column>
      </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.queryData.pageNum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="this.queryData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total">
    </el-pagination>
  </el-main>
</template>

<script>

import {cfTerminationDtoList} from "@/api/contract/cfTermination";

export default {
  name: "index",
  data() {
    return {
      tableData: [],
      queryData :{
        pageNum : 1,
        pageSize : 3,
        terminationNo: undefined,
        inputUserName: undefined,
        premiseName: undefined,
        startDate : undefined,
        endDate : undefined
      },
      rangeDate:undefined,
      total : 0

    };
  },
  methods:{
    //查询
    onSubmit() {
      console.log("时间:", this.rangeDate);
      if (this.rangeDate != undefined) {
        this.queryData.startDate = this.rangeDate[0];
        this.queryData.endDate = this.rangeDate[1];
      }
      console.log("查询数据:", this.queryData);
      this.list();
    },
    //分页
    handleSizeChange(pageSize) {
      console.log(`每页 ${pageSize} 条`);
      this.queryData.pageSize = pageSize;
      this.queryData.pageNum = 1;
      this.list();
    },
    handleCurrentChange(pageNum) {
      console.log(`当前页: ${pageNum}`);
      this.queryData.pageNum = pageNum;
      this.list();
    },
    list() {
      cfTerminationDtoList(this.queryData).then(res=>{
        console.log("解约数据:", res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    }
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>
.el-pagination {
  text-align: right;
}
</style>
